<template>
    <div class="content">
        <div class="top">
            <ul>
                <li>
                    <SelectIpt :lists="sourceIpt" ref="sourceIpt">
                        <p>来源</p>
                    </SelectIpt>
                </li>
                <li>
                    <TextIpt ref="visitorName">
                        <p>姓名</p>
                    </TextIpt>
                </li>
                <li>
                    <TextIpt ref="visitorPhone">
                        <p>手机号</p>
                    </TextIpt>
                </li>
            </ul>
            <div class="btn">
                <GreenBtn @click.native="query">查询</GreenBtn>
                <BlueBtn @click.native="visitorAdd">新增</BlueBtn>
                <BlueBtn @click.native="lookCode">访客二维码</BlueBtn>
                <BlueBtn>业主邀请设置</BlueBtn>
            </div>
        </div>
        <div class="table">
            <el-table :data="filterVisitor.slice(pages, pages + 10)" border style="width: 100%">
                <el-table-column type="index" label="序号" width="100">
                </el-table-column>
                <el-table-column prop="VisitorName" label="姓名" width="160">
                </el-table-column>
                <el-table-column prop="VisitrorPhone" label="手机号" width="200">
                </el-table-column>
                <el-table-column label="访问房屋" width="260">
                    <template slot-scope="scope">
                        {{ scope.row.BuildingName + ' ' + scope.row.UnitName + ' ' + scope.row.FloorNumber + '
                        '+scope.row.RoomNumber}}
                    </template>
                </el-table-column>
                <el-table-column prop="VisitorState" label="到访状态" width="160">
                </el-table-column>
                <el-table-column prop="VisitorDate" label="添加时间" width="220">
                </el-table-column>
                <el-table-column prop="VisitorSource" label="来源" width="160">
                </el-table-column>
                <el-table-column label="照片" width="150">
                    <template slot-scope="scope">
                        <p @click="lookImg(scope.row)">查看照片</p>
                    </template>

                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button size="mini" @click="lookInfo(scope.row)">详情</el-button>
                        <el-button type="danger" size="mini" @click="del(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="page">
                <div class="total-page">
                    <p>共<span>{{ Math.ceil(filterVisitor.length / 10) }}</span>页/<span>{{ filterVisitor.length
                            }}</span>条数据
                    </p>
                </div>
                <el-pagination background layout="prev, pager, next,jumper" @current-change="getPage" :page-size=10
                    :current-page.sync=page :total="filterVisitor.length" hide-on-single-page>
                </el-pagination>
            </div>
        </div>
        <!-- 查看详情弹框 -->
        <el-dialog title="查看信息" :visible.sync="infoDialog" width="50%" class="dialog" top="5vh">
            <el-form :model="formInfo" class="demo-form-inline" label-width="100px" disabled>
                <p class="dialog-title">被访信息</p>
                <div class="dialog-ipt">
                    <el-form-item label="房屋:">
                        <el-input v-model="formInfo.build"></el-input>
                    </el-form-item>
                    <el-form-item label="姓名:">
                        <el-input v-model="formInfo.owner"></el-input>
                    </el-form-item>
                    <el-form-item label="身份证号:">
                        <el-input v-model="formInfo.ownerID"></el-input>
                    </el-form-item>
                    <el-form-item label="手机号:">
                        <el-input v-model="formInfo.ownerPhone"></el-input>
                    </el-form-item>
                </div>
                <p class="dialog-title">访客信息</p>
                <div class="dialog-ipt">
                    <div class="item-dialog">
                        <el-form-item label="访问开始时间:">
                            <el-input v-model="formInfo.visitorBegin"></el-input>
                        </el-form-item>
                        <el-form-item label="访客姓名:">
                            <el-input v-model="formInfo.visitorName"></el-input>
                        </el-form-item>
                        <el-form-item label="身份证号:">
                            <el-input v-model="formInfo.visitorID"></el-input>
                        </el-form-item>
                        <el-form-item label="备注">
                            <el-input type="textarea" v-model="formInfo.visitorNote"></el-input>
                        </el-form-item>
                        <el-form-item label="到访状态:">
                            <el-input v-model="formInfo.visitorState"></el-input>
                        </el-form-item>
                    </div>
                    <div class="item-dialog">
                        <el-form-item label="访问结束时间:">
                            <el-input v-model="formInfo.visitorEnd"></el-input>
                        </el-form-item>
                        <el-form-item label="手机号:">
                            <el-input v-model="formInfo.visitorPhone"></el-input>
                        </el-form-item>
                        <el-form-item label="图片:">
                            <img :src="formInfo.visitorImg" alt="" class="dialog-img">
                        </el-form-item>
                    </div>
                </div>
                <p class="dialog-title">访客信息</p>
                <div class="dialog-ipt">
                    <el-form-item label="添加人:">
                        <el-input v-model="formInfo.visitorAddMan"></el-input>
                    </el-form-item>
                    <el-form-item label="添加时间:">
                        <el-input v-model="formInfo.visitorAddDate"></el-input>
                    </el-form-item>
                </div>
            </el-form>


        </el-dialog>
        <!-- 点击查看图片弹框 -->
        <el-dialog title="查看图片" :visible.sync="dialogImg" width="30%">
            <div class="dialogImg">
                <img :src="visitorIMg" alt="">
            </div>
        </el-dialog>
        <!-- 新增访客对话框 -->
        <el-dialog title="新增访客" :visible.sync="addDialog" width="50%" :before-close="handleClose" class="dialogAdd">
            <el-form ref="form" :model="addForm" :rules="rules" label-width="120px">
                <p class="dialog-title">被访信息</p>
                <div class="addDialog-top">
                    <el-form-item label="楼栋" prop="build">
                        <el-select v-model="addForm.build" placeholder="请选择" :clearable="true">
                            <el-option label="楼栋A" value="楼栋A"></el-option>
                            <el-option label="楼栋B" value="楼栋B"></el-option>
                            <el-option label="楼栋C" value="楼栋C"></el-option>
                            <el-option label="楼栋D" value="楼栋D"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="单元" prop="unit">
                        <el-select v-model="addForm.unit" placeholder="请选择" :clearable="true">
                            <el-option label="1单元" value="1单元"></el-option>
                            <el-option label="2单元" value="2单元"></el-option>
                            <el-option label="3单元" value="3单元"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="楼层" prop="floor">
                        <el-select v-model="addForm.floor" placeholder="请选择" :clearable="true">
                            <el-option label="一层" value="一层"></el-option>
                            <el-option label="二层" value="二层"></el-option>
                            <el-option label="三层" value="三层"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="房间" prop="room">
                        <el-select v-model="addForm.room" placeholder="请选择" :clearable="true">
                            <el-option label="101" value="101"></el-option>
                            <el-option label="102" value="102"></el-option>
                            <el-option label="201" value="201"></el-option>
                            <el-option label="202" value="202"></el-option>
                            <el-option label="301" value="301"></el-option>
                            <el-option label="302" value="302"></el-option>
                        </el-select>

                    </el-form-item>
                </div>

                <p class="dialog-title">被访信息</p>
                <div class="addDialog-bottom">
                    <div class="addDialog-left">
                        <el-form-item label="访问开始时间" prop="visitorBegin">
                            <el-date-picker v-model="addForm.visitorBegin" type="datetime" placeholder="选择日期时间"
                                :clearable="true">
                            </el-date-picker>
                        </el-form-item>
                        <el-form-item label="访客姓名" prop="visitorName">
                            <el-input v-model="addForm.visitorName" :clearable="true"></el-input>
                        </el-form-item>
                        <el-form-item label="身份证" prop="visitorID">
                            <el-input v-model="addForm.visitorID" :clearable="true"></el-input>
                        </el-form-item>
                        <el-form-item label="备注" prop="visitorNote">
                            <el-input type="textarea" v-model="addForm.visitorNote" :clearable="true"></el-input>
                        </el-form-item>
                    </div>
                    <div class="addDialog-right">
                        <el-form-item label="访问结束时间" prop="visitorEnd">
                            <el-date-picker v-model="addForm.visitorEnd" type="datetime" placeholder="选择日期时间"
                                :clearable="true">
                            </el-date-picker>
                        </el-form-item>
                        <el-form-item label="手机号" prop="visitorPhone">
                            <el-input v-model="addForm.visitorPhone" :clearable="true"></el-input>
                        </el-form-item>
                        <el-form-item label="照片" prop="visitorImg" class="avatar">
                            <el-upload class="avatar-uploader" action="http://127.0.0.1/access/updated"
                                :show-file-list="false" :on-success="handleAvatarSuccess"
                                :before-upload="beforeAvatarUpload">
                                <img v-if="addForm.visitorImg" :src="addForm.visitorImg" class="avatar">
                                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                            </el-upload>
                        </el-form-item>
                    </div>
                </div>

            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="handleClose">取 消</el-button>
                <el-button type="primary" @click="submitForm">确 定</el-button>
            </span>
        </el-dialog>
        <!-- 访客二维码 -->
        <el-dialog title="访客二维码" :visible.sync="codeDialog" width="30%">

            <span slot="footer" class="dialog-footer">
                <div class="codeDialog">
                    <img src="https://cdn7.axureshop.com/demo2024/2178128/images/%E8%AE%BF%E5%AE%A2%E7%AE%A1%E7%90%86/u15962.svg"
                        alt="">
                </div>
                <el-button @click="codeDialog = false">取 消</el-button>
                <el-button type="primary">下 载</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import SelectIpt from '@/components/SelectIpt.vue';
import TextIpt from '@/components/TextIpt.vue';
import GreenBtn from '@/components/GreenBtn.vue';
import BlueBtn from '@/components/BlueBtn.vue';
export default {
    components: {
        BlueBtn,
        GreenBtn,
        SelectIpt,
        TextIpt
    },
    methods: {
        //查看二维码
        lookCode() {
            this.codeDialog = true
        },
        //点击按钮新增
        visitorAdd() {
            this.addDialog = true
        },
        //添加访客
        addVisitor() {
            this.$axios.post('http://127.0.0.1/access/addVisitor',
                {
                    ...this.addForm,
                    addMan: localStorage.getItem('name')
                },
                {
                    headers: {
                        'Authorization': `Bearer ${localStorage.getItem('token')}`,
                        'Content-Type': 'application/json' // 如果需要发送 JSON 数据，则包含此行 // 设置请求头
                    },
                }).then(res => {
                    this.addDialog = false
                    this.getData()
                    this.$message({
                        message: '添加信息成功',
                        type: 'success'
                    });
                }).catch(err => {
                    console.log(err);
                })
        },
        submitForm() {
            if (new Date(this.addForm.visitorBegin) > new Date(this.addForm.visitorEnd)) {
                this.$message.error('访问开始时间和访问结束时间输入有误');
                this.addForm.visitorBegin = ''
                this.addForm.visitorEnd = ''
                return
            }
            this.$refs.form.validate((valid) => {
                if (valid) {
                    //表单验证通过，提交逻辑
                    this.addVisitor()

                } else {
                    return false;
                }
            });
        },
        handleAvatarSuccess(res, file) {
            this.addForm.visitorImg='http://127.0.0.1/uploads/'+res.filename 
        },
        beforeAvatarUpload(file) {
            console.log(file);
            
            const isJPG = file.type === 'image/jpeg';
            const isLt2M = file.size / 1024 / 1024 < 2;

            if (!isJPG) {
                this.$message.error('上传头像图片只能是 JPG 格式!');
            }
            if (!isLt2M) {
                this.$message.error('上传头像图片大小不能超过 2MB!');
            }
            return isJPG && isLt2M;
        },
        handleClose(done) {
            this.$confirm('确认关闭？')
                .then(_ => {
                    this.addDialog = false
                })
                .catch(_ => { });
        },
        lookImg(row) {
            this.visitorIMg = row.VisitorImg
            this.dialogImg = true
        },
        //点击查看详情
        lookInfo(row) {
            this.formInfo.build = row.BuildingName + ' ' + row.UnitName + ' ' + row.FloorNumber + ' ' + row.RoomNumber
            this.formInfo.owner = row.Owner
            this.formInfo.ownerID = row.CardNum
            this.formInfo.ownerPhone = row.Phone
            this.formInfo.visitorBegin = row.VisitorBegin
            this.formInfo.visitorEnd = row.VisitorEnd
            this.formInfo.visitorName = row.VisitorName
            this.formInfo.visitorPhone = row.VisitrorPhone
            this.formInfo.visitorImg = row.VisitorImg
            this.formInfo.visitorID = row.VisitorID == null || row.VisitorID == '' ? '未填写' : row.VisitorID
            this.formInfo.visitorNote = row.VisitorNote
            this.formInfo.visitorState = row.VisitorState
            this.formInfo.visitorAddMan = row.VisitorAddMan
            this.formInfo.visitorAddDate = row.VisitorDate
            this.infoDialog = true
        },
        //点击查询
        query() {
            this.pages = 0
            this.page = 0
            const serach = {}
            if (this.$refs.sourceIpt.value) {
                serach.sourceIpt = this.$refs.sourceIpt.value
            }
            if (this.$refs.visitorName.input) {
                serach.visitorName = this.$refs.visitorName.input
            }
            if (this.$refs.visitorPhone.input) {
                serach.visitorPhone = this.$refs.visitorPhone.input
            }
            this.filterVisitor = this.allVisitor.filter(item => {

                if (serach.sourceIpt && item.VisitorSource !== serach.sourceIpt) {
                    return false; // 如果不匹配，则排除该房间
                }

                if (serach.visitorName && !item.VisitorName.includes(serach.visitorName)) {
                    return false; // 如果不匹配，则排除该房间
                }
                if (serach.visitorPhone && !item.VisitrorPhone.includes(serach.visitorPhone)) {
                    return false; // 如果不匹配，则排除该房间
                }
                return true
            })
        },
        del(row) {
            console.log(row);
        },
        //get 当前页
        getPage(page) {
            this.pages = 10 * (page - 1)
        },
        getData() {
            this.$axios.get('http://127.0.0.1/access/allVisitor', {
                headers: {
                    'Authorization': `Bearer ${localStorage.getItem('token')}`,
                    'Content-Type': 'application/json' // 如果需要发送 JSON 数据，则包含此行 // 设置请求头
                }
            }).then(res => {
                this.allVisitor = res.data
                this.filterVisitor = res.data
            }).catch(err => {
                console.log(err);
            })
        }
    },
    data() {
        return {
            codeDialog: false,
            rules: {
                build: [
                    { required: true, message: '请选择楼栋', trigger: 'change' }
                ],
                unit: [
                    { required: true, message: '请选择单元', trigger: 'change' }
                ],
                floor: [
                    { required: true, message: '请选择楼层', trigger: 'change' }
                ],
                room: [
                    { required: true, message: '请选择房号', trigger: 'change' }
                ],
                visitorBegin: [
                    { required: true, message: '请选择访问开始时间', trigger: 'change' }
                ],
                visitorEnd: [
                    { required: true, message: '请选择访问结束时间', trigger: 'change' }
                ],
                visitorName: [
                    { required: true, message: '请输入访客姓名', trigger: 'blur' }
                ],
                visitorPhone: [
                    { required: true, message: '请输入手机号', trigger: 'blur' },
                    { pattern: /^[0-9]{11}$/, message: '手机号格式不正确', trigger: 'blur' }
                ],
                visitorImg: [
                    { required: true, message: '请上传访客照片', trigger: 'change' }
                ]
            },
            addForm: {
                build: '',
                unit: '',
                floor: '',
                room: '',
                visitorBegin: "",
                visitorName: "",
                visitorID: "",
                visitorNote: '',
                visitorEnd: '',
                visitorPhone: "",
                visitorImg: "",
            },
            //新增对话框
            addDialog: false,
            visitorIMg: '',
            dialogImg: false,
            infoDialog: false,
            formInfo: {
                build: '',
                owner: '',
                ownerID: '',
                ownerPhone: '',
                visitorBegin: '',
                visitorEnd: '',
                visitorName: '',
                visitorPhone: '',
                visitorImg: '',
                visitorID: '',
                visitorNote: '',
                visitorState: '',
                visitorAddMan: '',
                visitorAddDate: ''
            },
            //查询选择框
            sourceIpt: ['小程序', '物业平台'],

            page: 0,
            pages: 0,
            //所有接口的数据
            allVisitor: [],
            filterVisitor: []
        }
    },
    mounted() {
        this.getData()
    }
}
</script>

<style scoped>
.codeDialog {
    display: flex;
    justify-content: center;
    margin-bottom: 40px;
}

.dialogAdd>>>.el-dialog__footer {
    padding: 10px 40px 50px;
}

.addDialog-left {
    margin: 0 80px 0 40px;
}

.addDialog-bottom {
    display: flex;
}

.addDialog-top>>>.el-form-item__label {
    width: 80px !important;
}

.addDialog-top>>>.el-form-item__content {
    margin-left: 90px !important;
}

.item-select p {
    margin-right: 10px;
}

.addDialog-top {
    display: flex;
}

.addDialog-top>>>input {
    width: 120px;
}

.avatar>>>.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}

.avatar {
    width: 178px;
    height: 178px;
    display: block;
}

.dialogImg {
    display: flex;
    justify-content: center;
    padding-bottom: 20px;
}

.dialogImg img {
    width: 360px;
    height: 380px;
    object-fit: contain;
}

.dialog-img {
    width: 200px;
    height: 200px;
    object-fit: contain;
}

.dialog>>>textarea {
    min-height: 70px;
    resize: none;
}

.dialog>>>.el-dialog__body {
    padding: 10px 90px 50px;
}

.dialog-title {
    font-size: 16px;
    color: #5e5e5e;
    padding-bottom: 20px;
    border-bottom: 1px solid #c9c9c9;
    margin-bottom: 15px;
}

.dialog-ipt {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.dialog-ipt>>>input {
    width: 240px;
}

.table>>>.el-table {
    min-height: 580px;
}

.page {
    display: flex;
    align-items: center;
    justify-content: end;
    margin-top: 20px;
}

.page>>>button {
    min-width: 35px !important;
    height: 25px;
    line-height: 25px;
    border-radius: 3px !important;
    border: 1px solid rgba(215, 215, 215, 1);
    background: #fff !important;
}

.page>>>.active {
    border-color: rgba(26, 135, 254, 1) !important;
    background-color: rgba(26, 135, 254, 1) !important;
    color: #fff !important;
}

.page>>>.el-pager li {
    min-width: 35px !important;
    height: 25px;
    line-height: 25px;
    border-radius: 3px !important;
    border: 1px solid rgba(215, 215, 215, 1);
    font-size: 12px;
    color: #999;
    font-weight: normal !important;
    background: #fff;
}

.total-page span {
    color: #FF3C2C;
}

.total-page {
    font-size: 12px;
    color: #666;
}

.table p {
    color: #3399ff;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

.top li {
    margin-bottom: 20px;
}
</style>